<template>
	<div class="hello">
		<div class="loading">
		</div>
		<div>
			<a-switch
				:checked="!loading"
				@change="onChange"
			/>

			<a-list
				item-layout="vertical"
				size="large"
				:data-source="listData"
			>
				<a-list-item
					slot="renderItem"
					key="item.title"
					slot-scope="item"
				>
					<template
						v-for="{ type, text } in actions"
						slot="actions"
					>
						<span
							:key="type"
							v-if="!loading"
						>
							<a-icon
								:type="type"
								style="margin-right: 8px"
							/>
							{{ text }}
						</span>
					</template>
					<img
						v-if="!loading"
						slot="extra"
						width="272"
						alt="logo"
						src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
					/>
					<a-skeleton
						:loading="loading"
						active
						avatar
					>
						<a-list-item-meta :description="item.description">
							<a
								slot="title"
								:href="item.href"
							>{{ item.title }}</a>
							<a-avatar
								slot="avatar"
								:src="item.avatar"
							/>
						</a-list-item-meta>
						{{ item.content }}
					</a-skeleton>
				</a-list-item>
			</a-list>
		</div>
	</div>
</template>

<script>
	const listData = [];
	for (let i = 0; i < 3; i++) {
		listData.push({
			href: "https://www.antdv.com/",
			title: `ant design vue part ${i}`,
			avatar: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
			description:
				"Ant Design, a design language for background applications, is refined by Ant UED Team.",
			content:
				"We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.",
		});
	}

	export default {
		name: "analysis",
		data() {
			return {
				loading: true,
				listData,
				actions: [
					{ type: "star-o", text: "156" },
					{ type: "like-o", text: "156" },
					{ type: "message", text: "2" },
				],
			};
		},
		methods: {
			onChange(checked) {
				this.loading = !checked;
			},
		},
	};
</script>

<style scoped>
	.skeleton-demo {
		border: 1px solid #f4f4f4;
	}

	.loading {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		background: conic-gradient(deepskyblue, 30%, white);
		--mask: radial-gradient(closest-side, transparent 75%, black 76%);
		-webkit-mask-image: var(--mask);
		mask-image: var(--mask);
		animation: spin 4s linear infinite reverse;
	}
	@keyframes spin {
		from {
			transform: rotate(360deg);
		}
		to {
			transform: rotate(0deg);
		}
	}
</style>